<style lang='stylus'>
page {
  height: 100%;
}

.header {
  width: 100%;
}

.scroller {
  width: 100%;
  overflow: hidden;
}
.btn-card{
  display :inline-block;
  // width :20%;
  height:60rpx;
  background-color : #ed3f14;
  font-size :36rpx;
  line-height :60rpx;
  color:#fff;
}
.card-bg {
  background: linear-gradient(90deg,#3e87f0, #3e78f5, #3e87f0);
  border 4rpx solid #dcdcdc
}
</style>
<template>
  <view class="content ft36 flex flex-column bgw">
    <view class="scroller flex1">
      <scroll-view
        class="scroll-view"
        scroll-y
        :style="{height:scrollerObj.height + 'px'}"
        @scrolltolower='scrolltolower'
        :lower-threshold='scrollerObj.lowerThreshold'
      >

        <view class="pd20 mg30-x mgt30  radius-16 bgw border-border card-bg ftw "
          v-for="cardList in list"  :key="cardList.cardId"
          @click="toThisCard(cardList)">
            <view class="item-header flex flex-between bcardList-bottom pdb20">
              <text class="ftw">IC卡编号:</text>
              
              <text  :class="dlc-success">
                {{ cardList.cardNo}}</text>
               
            </view>
            <view class="item-body pdt20">

               <view class="cell flex flex-between mgb12">
                <text class="ftw">IC卡状态:</text>
                <text 
                :style="cardList.isFlag==1?'color:#000':'color:#ff524c'"
                >{{cardList.isFlag==1?"正常使用":"禁用中"}}</text>
              </view>    
              
              <view class="cell flex flex-between mgb12">
                <text class="ftw">IC卡归属地:</text>
                <text > {{cardList.province + cardList.city }}</text>
              </view>     
				<view class="cell flex flex-between mgb12">
				    <text class="ftw">金额:</text>
				    <text >{{cardList.amount/100+cardList.givenAmount/100 }}元</text>
				</view>  

         <!--        <view class="cell flex flex-between mgb12">
                <text class="ftw">剩余金额:</text>
                <text >{{cardList.amount/100 }}元</text>
              </view>        

               <view class="cell flex flex-between mgb12">
                <text class="ftw">赠送金额:</text>
                <text >{{cardList.givenAmount/100 }}元</text>
              </view>  -->  

              
            </view>
        </view>
      </scroll-view>
     
    </view>
      <i-button  type="primary" shape="circle" size="small"  @tap="toBindingIcCard">绑定新的IC卡</i-button>
    <i-modal title="输入需要绑定IC卡编号" :visible="visible1" @ok="bindingIcCard" @cancel="visible1 = false">
      <input v-model="icNum" type="text" placeholder="请输入IC卡编号">
    </i-modal>
    <i-message id="message" />
  </view>
</template>

<script>
import { getUserIcCardList,unbindingIcCard,bindingIcCard } from '@/api';
import { parseTime } from '@/utils';
import LoadMore from '@/mixins/LoadMore';
import store from '@/store'
const { $Message } = require('@/wxcomponents/iview/base/index');
export default {
  mixins: [LoadMore],
  data () {
    return {
      info:{
        offset:1,
        limit:"20"
        },
      list:[],  
      visible1:false,
      icNum:"",
       "total": 2,
        "size": 10,
        "current": 1,
        "searchCount": true,
        "pages": 1
    }
  },
  methods: {
    async fetchData () {
       //调用服务器接口
      const { data } = await getUserIcCardList({...this.info})
      console.log(data)
      if (data.code === 1) {
        this.pages=data.data.pages
        let { records, total } = data.data
        records = records.map(i => {
          return {
            ...i
          }
        })
        this.list = this.list.concat(records)
          if(this.pages>this.offset){
           this.offset=this.offset+1
        }
        let len = this.list.length
        if (len >= total) {
          this.scrollerObj.isEnd = true
        }
      }
    },

    async delUserCard(id){
      //调用服务器接口
      const {data} =await userCardDel({cardId:id})
      console.log(data)
    },
    //绑定新的IC卡
    toBindingIcCard(){
		this.visible1=true
    },
	//绑定IC卡函数，IC卡编号发送服务器
    async bindingIcCard(){
        if(this.icNum){
          //调用服务器接口
        const { data } = await bindingIcCard({cardNo:this.icNum})
        if(data.code==1){
          $Message({
            content: '绑定成功',
            type: 'success',
            })
            setTimeout(()=>{
             uni.redirectTo({
                url:"/pagesA/ICCard/ICCardList",
              })
            },2000)
        } else {
          $Message({
            content: '绑定失败，请联系后台工作人员',
            type: 'error',
            duration: 2
            })
            setTimeout(()=>{
            uni.redirectTo({
                url:"/pagesA/ICCard/ICCardList",
              })
            },2000)
        }}},
        toThisCard(e) {
         let eData=  JSON.stringify(e)
         if(e.isFlag == 1){
			uni.redirectTo({
				url:"/pagesA/ICCard/ICCard?id="+eData
			})
         } else if (e.isFlag==2) {
			  $Message({
				content: '该IC卡已被禁用，请联系后台工作人员解禁后再进行操作',
				type: 'error',
				duration: 2
				})
         }
        }
  },
  onLoad(query) {
    // this.fetchData ()
    // let {type} = {...query}
    // if(type){
    //   this.type = 2
    //   uni.setNavigationBarTitle({
    //     title:'取衣订单'
    //   });
    // }
  },
  onShow(){
  },
  
  onPullDownRefresh() {
    try {
      this.list=[]
      this.getUserIcCardList()
    } catch (e) {
      // error
    }
    this.getDeviceInfo();
    setTimeout(() => {
      uni.stopPullDownRefresh();
    }, 1500);
  },

}
</script>

